var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    animationData: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.creatCanvas();
    this.createCanvasLeidaPicSecond();
  },

  /**
   * 创建动画
   */
  creatCanvas: function () {
    const ctx = wx.createCanvasContext('mycanvas');
    var arcNum = 4, //圆个数
      x = 150,   //圆心坐标x
      y = 150,   //圆心坐标y
      linew = 3,  //圆线条宽度
      arcType = ['文科', '理科', '生活', '文艺', '流行', '娱乐'],  //雷达图属性值
      arc_rad = 100; //最大圆半径，以20逐级递减
    for (var i = 0; i < arcNum; i++) {
      if (i > 0) { linew = 1.5; }
      ctx.beginPath();
      ctx.setLineWidth(linew);
      ctx.arc(x, y, arc_rad, 0, 2 * Math.PI);
      ctx.setStrokeStyle('white');
      ctx.stroke();
      ctx.closePath();
      arc_rad = arc_rad - 20;
    }

    //线条
    // ctx.beginPath();
    // ctx.moveTo(300 / 2, 50);
    // ctx.lineTo(300 / 2, 250);
    // ctx.stroke();
    // ctx.closePath();

    // ctx.beginPath();
    // ctx.moveTo(-150 * Math.sin(90) + 200, -150 * Math.cos(90) + 140);
    // ctx.lineTo(150 * Math.sin(90) + 100, 150 * Math.cos(90) + 160);
    // ctx.stroke();
    // ctx.closePath();

    ctx.moveTo(150, 150);
    for(var i=0; i<5; i++){
      ctx.lineTo(150, 50);
      ctx.stroke();
      ctx.closePath();

      ctx.lineTo(235, 100);
      ctx.stroke();
      ctx.closePath();


    }

    // ctx.beginPath();
    // ctx.moveTo(-150 * Math.sin(180) + 115, -150 * Math.cos(180) + 115);
    // ctx.lineTo(150 * Math.sin(180) + 185, 150 * Math.cos(180) + 185);
    // ctx.stroke();
    // ctx.closePath();

    // ctx.setFontSize(16);
    // ctx.setFillStyle('white');
    // ctx.fillText('文科', -150 * Math.sin(90) + 170, -150 * Math.cos(90) + 160);

    ctx.draw();
  },

  /**
   * 雷达图二
   */
  createCanvasLeidaPicSecond: function () {
    var topTypeArray = ['文科', '理科', '生活', '文艺', '流行', '娱乐']; //topTypeArray.length为雷达图分支数
    const ctx = wx.createCanvasContext('twoThree');  //画布上下文
    var len = topTypeArray.length,
      arc_r = 150;   //圆心坐标
    ctx.setFontSize(12);  //雷达文字属性字体大小
    //绘制n个圆
    var arc_rad = 100; //半径
    for (var i = 0; i < 5; i++) {
      ctx.beginPath();
      if (i == 0) {
        ctx.setLineWidth(2);
      }
      else {
        ctx.setLineWidth(1);
      }
      ctx.arc(arc_r, arc_r, arc_rad, 0, 2 * Math.PI);
      ctx.setStrokeStyle('white');
      ctx.stroke();
      ctx.closePath();
      arc_rad = arc_rad - 20;
    }

    //绘制圆n条相交直径
    ctx.beginPath();
    for (var i = 0; i < topTypeArray.length; i++) {
      ctx.moveTo(arc_r, arc_r)
      ctx.setFillStyle("white");
      if (2 * Math.PI * i / len == 0) {
        ctx.lineTo(arc_r, 50);
        ctx.fillText(topTypeArray[i], 140, 40);
      } else if (2 * Math.PI * i / len < Math.PI / 2) {
        ctx.lineTo(arc_r - 100 * Math.sin(2 * Math.PI * i / len), arc_r - 100 * Math.cos(2 * Math.PI * i / len));
        ctx.fillText(topTypeArray[i], arc_r - 140 * Math.sin(2 * Math.PI * i / len), arc_r - 100 * Math.cos(2 * Math.PI * i / len));
      } else if (2 * Math.PI * i / len == Math.PI / 2) {
        ctx.lineTo(10, arc_r);
        ctx.fillText(topTypeArray[i], 10, arc_r);
      } else if (2 * Math.PI * i / len < Math.PI) {
        ctx.lineTo(arc_r - 100 * Math.cos(2 * Math.PI * i / len - Math.PI / 2), arc_r + 100 * Math.sin(2 * Math.PI * i / len - Math.PI / 2));
        ctx.fillText(topTypeArray[i], arc_r - 140 * Math.cos(2 * Math.PI * i / len - Math.PI / 2), arc_r + 120 * Math.sin(2 * Math.PI * i / len - Math.PI / 2));
      } else if (2 * Math.PI * i / len == Math.PI) {
        ctx.lineTo(arc_r, 250);
        ctx.fillText(topTypeArray[i], 140, 270);
      } else if (2 * Math.PI * i / len < 3 * Math.PI / 2) {
        ctx.lineTo(arc_r + 100 * Math.sin(2 * Math.PI * i / len - Math.PI), arc_r + 100 * Math.cos(2 * Math.PI * i / len - Math.PI));
        ctx.fillText(topTypeArray[i], arc_r + 120 * Math.sin(2 * Math.PI * i / len - Math.PI) - 10, arc_r + 120 * Math.cos(2 * Math.PI * i / len - Math.PI));
      } else if (2 * Math.PI * i / len == 3 * Math.PI / 2) {
        ctx.lineTo(290, arc_r);
        ctx.fillText(topTypeArray[i], 290, arc_r);
      } else {
        ctx.lineTo(arc_r + 100 * Math.cos(2 * Math.PI * i / len - 3 * Math.PI / 2), arc_r - 100 * Math.sin(2 * Math.PI * i / len - 3 * Math.PI / 2));
        ctx.fillText(topTypeArray[i], arc_r + 120 * Math.cos(2 * Math.PI * i / len - 3 * Math.PI / 2) - 10, arc_r - 100 * Math.sin(2 * Math.PI * i / len - 3 * Math.PI / 2));
      }
      ctx.stroke();
    }
    ctx.closePath();

    //绘制圆内接多边形
    ctx.beginPath();
    ctx.setGlobalAlpha(0.5);
    ctx.setFillStyle('#fea102');
    ctx.moveTo(arc_r, arc_r - 50);
    for (var n = 0; n < len; n++) {
      if (2 * Math.PI * n / len == 0) {
        continue;
      } else if (2 * Math.PI * n / len < Math.PI / 2) {
        ctx.lineTo(arc_r - 50 * Math.sin(2 * Math.PI * n / len), arc_r - 50 * Math.cos(2 * Math.PI * n / len));
      } else if (2 * Math.PI * n / len == Math.PI / 2) {
        ctx.lineTo(arc_r - 100, arc_r);
      } else if (2 * Math.PI * n / len < Math.PI) {
        ctx.lineTo(arc_r - 70 * Math.cos(2 * Math.PI * n / len - Math.PI / 2), arc_r + 70 * Math.sin(2 * Math.PI * n / len - Math.PI / 2));
      } else if (2 * Math.PI * n / len == Math.PI) {
        ctx.lineTo(arc_r, arc_r + 50);
      } else if (2 * Math.PI * n / len < 3 * Math.PI / 2) {
        ctx.lineTo(arc_r + 50 * Math.sin(2 * Math.PI * n / len - Math.PI), arc_r + 50 * Math.cos(2 * Math.PI * n / len - Math.PI));
      } else if (2 * Math.PI * n / len == 3 * Math.PI / 2) {
        ctx.lineTo(arc_r + 50, arc_r);
      } else {
        ctx.lineTo(arc_r + 70 * Math.cos(2 * Math.PI * n / len - 3 * Math.PI / 2), arc_r - 70 * Math.sin(2 * Math.PI * n / len - 3 * Math.PI / 2));
      }
    }
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    //雷达图维度线刻度  
    // ctx.beginPath();
    // for (var i = 0; i <= 5; i++) {
    //   ctx.setFillStyle('black');
    //   ctx.fillText(i, arc_r + 2, arc_r - 20 * i + 5);
    // }
    // ctx.closePath();
    ctx.draw();
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})